<template>
	<div class="index_cover" :class="`images${list.length}`" @click.stop>
		<div class="cover" v-for="(item, index) in list" :key="index">
			<!-- <img :src="item"/> -->
			<el-image :src="item" :preview-src-list="list"></el-image>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		list: {
			type: [Array, Number],
			default: () => []
		}
	}
}
</script>

<style scoped lang="scss">
$width: 150px;
$height: 150px;

.index_cover {
	width: $width;
	height: $height;
	padding-top: 12px;
	box-sizing: content-box;

	.cover {
		float: left;
		box-sizing: border-box;

		img {
			width: 100%;
			height: 100%;
		}

		.el-image {
			width: 100%;
			height: 100%;
		}
	}
}

.images1 {
	.cover {
		width: $width;
		height: $height;
	}
}

.images2 {
	.cover {
		width: calc(#{$width}/2);
		height: $height;
		border-right: 1px solid #fff;

		&:last-child {
			border: none;
		}
	}
}

.images3 {
	.cover {
		width: calc(#{$width}/2);
		height: calc(#{$height}/2);

		&:nth-child(1) {
			width: calc(#{$width}/2);
			height: $height;
			border-right: 1px solid #fff;
		}

		&:nth-child(3) {
			border-top: 1px solid #fff;
		}
	}
}

.images4 {
	.cover {
		width: calc(#{$width}/2);
		height: calc(#{$height}/2);

		&:nth-child(odd) {
			border-right: 1px solid #fff;
		}

		&:nth-child(3),
		&:nth-child(4) {
			border-top: 1px solid #fff;
		}
	}
}

.images5 {
	.cover {
		width: calc(#{$width}/3);
		height: calc(#{$height}/3);
		border-right: 1px solid #fff;

		&:nth-child(1) {
			width: calc(#{$width}/3*2);
			height: calc(#{$height}/3*2);
		}

		&:nth-child(2) {
			width: calc(#{$width}/3);
			height: calc(#{$height}/3*2);
		}

		&:nth-child(n+3) {
			border-top: 1px solid #fff;
		}

		&:nth-child(2),
		&:nth-child(5) {
			border-right: none;
		}
	}
}

.images6 {
	.cover {
		width: calc(#{$width}/3);
		height: calc(#{$height}/3);
		border-right: 1px solid #fff;

		&:nth-child(1) {
			width: calc(#{$width}/3*2);
			height: calc(#{$height}/3*2);
		}

		&:nth-child(n+3) {
			border-top: 1px solid #fff;
		}

		&:nth-child(2),
		&:nth-child(3),
		&:nth-child(6) {
			border-right: none;
		}
	}
}

.images7,
.images8,
.images9 {

	// float: none;
	// display: flex;
	// flex-wrap: wrap;

	.cover {
		width: calc(#{$width}/3);
		height: calc(#{$height}/3);
		border-right: 1px solid #fff;
		border-top: 1px solid #fff;
		// flex: 0 0 55rpx;
		// height: 55rpx;
	}
}
</style>